<template>
  <el-container>
    <!-- 头部区域 -->
    <el-header>
      <div class="logoTitle">
        <img src="../assets/logo-small.png" alt="logo">
        <span>基于区块链的数字作品版权保护系统</span>
      </div>
      <div style="margin-bottom: 5px;">
        <el-input placeholder="开始搜索吧" v-model="searchInput" class="input-with-select">
          <el-select v-model="select" slot="prepend" style="width: 100px" placeholder="请选择">
            <el-option label="搜作者" value="1"></el-option>
            <el-option label="搜作品" value="2"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </div>
      <el-button @click="toLogin()">登录</el-button>
    </el-header>
    <!-- 页面主体 -->
    <el-main>
      <!-- <Login></Login> -->
      <router-view></router-view>
    </el-main>
    <!-- 尾部区域 -->
    <!-- <el-footer>
      <div>大连理工大学 软件学院</div>
    </el-footer> -->
  </el-container>
</template>

<script>
// import Login from './Login.vue'

export default {
  // components: {
  //   Login // Login: Login
  // },
  data () {
    return {
      searchInput: '',
      select: '1'
    }
  },
  methods: {
    // 搜索
    search () {
      if (this.searchInput !== '') {
        this.$router.push('/tourist/search/' + this.select + '/' + this.searchInput)
        window.location.reload()
      } else {
        alert('请输入搜索内容')
      }
    },
    toLogin () {
      this.searchInput = ''
      this.$router.push('/login')
    }
  }
}
</script>

<style  lang="less" scoped>
.el-container{
    height: 100%;
}

.el-header {
  // border-bottom: 1px solid #808080;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333;
  font-size: 20px;
  .logoTitle {
    display: flex;
    align-items: center;
    span {
      margin-left: 15px;
    }
  };
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
    margin-right: 15px;
  }
}
.el-main{
  // border-bottom: 1px solid #808080;
  background-color: #f7f8fa;
  // background-color: #fff;
}

.el-footer{
  color: #666;
  font-size: 12px;
  > div {
    text-align: center;
    position: absolute;
    left: 50%;
    bottom: 5%;
    transform: translate(-50%,50%);
  }
}

</style>
